
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<ui:composition template="/layouts/default.xhtml">
	<ui:define name="title">#{text['eleveDetail.title']}</ui:define>
	<ui:param name="menu" value="EleveMenu" />
	<ui:param name="menuleft" value="EleveFormMenu"/>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	<ui:define name="body">
		<div class="col-sm-12">
			
			<h:form id="eleveForm" enctype="multipart/form-data">
				<div class="form-group">
					<h:inputHidden value="#{eleveController.eleve.id}" id="id" />
				</div>
				
				<div class="page-header">
					<h3>#{text['eleveForm.information']}</h3	>
				</div>
				
				<div class="well">
					<div class="row">
							<div class="col-sm-8 form-group">
								<p:fileUpload fileUploadListener="#{eleveController.handleFileUpload}" mode="advanced" auto="true" update=":eleveForm:imageToDisplay"
	                 					 sizeLimit="1000000000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" />
							</div>
							<div class="col-sm-2 form-group col-md-offset-1">
								<p:graphicImage cache="false" id="imageToDisplay" styleClass="img-rounded"
												url="#{eleveController.eleve.imageToDisplay}"
												height="150" width="130"/>
							</div>
						</div>
				</div>
				
				<div class="well">
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="nom" value="#{text['eleve.nom']}" />
							<h:inputText id="nom" value="#{eleveController.eleve.nom}"
								styleClass="form-control" required="true" maxlength="50" />
							<p:message for="nom" />
						</div>
						
						<div style="text-align: right;" class="col-sm-4 form-group col-md-offset-4">
							<h:outputLabel styleClass="control-label" for="nomAr" value="#{text['eleve.nomAr']}" />
							<h:inputText id="nomAr" style="text-align: right;" value="#{eleveController.eleve.nomAr}"
								styleClass="form-control" required="true" maxlength="50" />
							<p:message for="nomAr" />
						</div>
						
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="prenom" value="#{text['eleve.prenom']}" />
							<h:inputText id="prenom" value="#{eleveController.eleve.prenom}"
								styleClass="form-control" required="true" maxlength="50" />
							<p:message for="prenom" />
						</div>
						
						<div style="text-align: right;" class="col-sm-4 form-group col-md-offset-4">
							<h:outputLabel styleClass="control-label" for="prenomAr" value="#{text['eleve.prenomAr']}" />
							<h:inputText style="text-align: right;" id="prenomAr" value="#{eleveController.eleve.prenomAr}"
								styleClass="form-control" required="true" maxlength="50" />
							<p:message for="prenomAr" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="genre" value="#{text['eleve.genre']}" />
							<p:selectOneRadio id="genre" value="#{eleveController.eleve.genre}">  
					            <f:selectItems value="#{eleveController.genres}" var="genre"  itemLabel="#{genre.label}" itemValue="#{genre.value}"/>  
					        </p:selectOneRadio> 
					   </div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="dateNaissance" value="#{text['eleve.dateNaissance']}" /> <br/>
							<p:calendar value="#{eleveController.eleve.dateNaissance}" locale="fr" maxdate="now -730" navigator="true" id="dateNaissance" showOn="button" pattern="#{text['date.format']}" />
							<p:message for="dateNaissance" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="lieuNaissance"
								value="#{text['eleve.lieuNaissance']}" />
							<h:inputText id="lieuNaissance"
								value="#{eleveController.eleve.lieuNaissance}" styleClass="form-control"
								required="false" maxlength="50" />
							<p:message for="lieuNaissance" />
						</div>
						
						<div style="text-align: right;" class="col-sm-4 form-group col-md-offset-4">
							<h:outputLabel styleClass="control-label" for="lieuNaissanceAr"
								value="#{text['eleve.lieuNaissanceAr']}" />
							<h:inputText id="lieuNaissanceAr" style="text-align: right;"
								value="#{eleveController.eleve.lieuNaissanceAr}" styleClass="form-control"
								required="false" maxlength="50" />
							<p:message for="lieuNaissanceAr" />
						</div>
					</div>
				</div>
				
				<div class="page-header">
						<h3>#{text['eleveForm.inscription']}</h3	>
				</div>
				
				<div class="well">
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="dateInscription" value="#{text['eleve.dateInscription']}" /><br/>
							<p:calendar value="#{eleveController.eleve.dateInscription}" locale="fr" navigator="true" 
									maxdate="now" id="dateInscription" showOn="button" pattern="#{text['date.format']}" />
							<p:message for="dateInscription" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="numeroInscription" value="#{text['eleve.numeroInscription']}" />
							<h:inputText id="numeroInscription" value="#{eleveController.eleve.numeroInscription}"
								styleClass="form-control" required="true" maxlength="15"/>
							<p:message for="numeroInscription" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="numeroInscription" value="#{text['eleve.numeroInscriptionNational']}" />
							<h:inputText id="numeroInscriptionNational" value="#{eleveController.eleve.numeroInscriptionNational}"
								styleClass="form-control" required="false" maxlength="30"/>
							<p:message for="numeroInscriptionNational" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="classe" value="#{text['eleve.classe']}" />
							<h:selectOneMenu id="classe" styleClass="form-control" value="#{eleveController.eleve.groupe.classe.id}" required="true">
								<f:selectItems value="#{eleveController.classes}" var="classe" itemLabel="#{classe.nomClasse}" itemValue="#{classe.id}" />
								<p:ajax partialSubmit="true" update="groupe" listener="#{eleveController.handleGroupeChange}" /> 
							</h:selectOneMenu>
							<p:message for="classe" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="groupe" value="#{text['eleve.groupe']}" />
							<h:selectOneMenu id="groupe" styleClass="form-control" value="#{eleveController.eleve.groupe.id}" required="true">
								<f:selectItems value="#{eleveController.groupes}" var="groupe" itemLabel="#{groupe.libelleGroupe}" itemValue="#{groupe.id}" />
							</h:selectOneMenu>
							<p:message for="classe" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="ordreClasse" value="#{text['eleve.ordreClasse']}" /><br/>
							<h:inputText id="ordreClasse" style="width:30%;" value="#{eleveController.eleve.ordreClasse}" styleClass="form-control"
								required="false" maxlength="255" />
							<p:message for="ordreClasse" />
						</div>
					</div>
					
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="exonere" value="#{text['eleve.exonere']}" /><br/>
							<p:selectBooleanCheckbox id="exonere" value="#{eleveController.eleve.exonere}">
								<p:ajax partialSubmit="true" />
							</p:selectBooleanCheckbox>
				      	</div>
			      	</div>
			      	
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="paiementMensuel" value="#{text['eleve.paiementMensuel']}" />
							<h:inputText id="paiementMensuel" style="width:30%;" validatorMessage="#{text['errors.min']}"  value="#{eleveController.eleve.paiementMensuel}" 
								styleClass="form-control" required="true" maxlength="255" >
								<c:if test="#{!eleveController.eleve.exonere}">
									<f:validateDoubleRange minimum="1.0"/>								
								</c:if>
							</h:inputText>
							<p:message for="paiementMensuel" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="paiementTransport" value="#{text['eleve.paiementTransport']}" />
							<h:inputText id="paiementTransport" style="width:30%;" validatorMessage="#{text['errors.min']}" value="#{eleveController.eleve.paiementTransport}" styleClass="form-control"
								required="false"/>
							<p:message for="paiementTransport" />
						</div>
					</div>
				</div>
				
				<div class="page-header">
					<h3>#{text['eleveForm.contact']}</h3	>
				</div>
				
				<div class="well">
					<div class="row">
						
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="telephoneParent"
								value="#{text['eleve.telephoneParent']}" />
							<h:inputText id="telephoneParent" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.telephoneParent}" styleClass="form-control" required="false" maxlength="15" >
								<f:validateRegex pattern="^0\d{9}"/>
							</h:inputText>
							<p:message for="telephoneParent" />
						</div>
					</div>
					
					<div class="row">
						
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="telephonePere1"
								value="#{text['eleve.phone.fother1']}" />
							<h:inputText id="telephonePere1" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.telephonePere1}" styleClass="form-control" required="false" maxlength="15" >
								<f:validateRegex pattern="^0\d{9}"/>
							</h:inputText>
							<p:message for="telephonePere1" />
						</div>
						
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="telephoneMere2"
								value="#{text['eleve.phone.fother2']}" />
							<h:inputText id="telephonePere2" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.telephonePere2}" styleClass="form-control" required="false" maxlength="15" >
								<f:validateRegex pattern="^0\d{9}"/>
							</h:inputText>
							<p:message for="telephonePere2" />
						</div>
					</div>
					
					<div class="row">
						
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="telephoneMere1"
								value="#{text['eleve.phone.mother1']}" />
							<h:inputText id="telephoneMere1" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.telephoneMere1}" styleClass="form-control" required="false" maxlength="15" >
								<f:validateRegex pattern="^0\d{9}"/>
							</h:inputText>
							<p:message for="telephoneMere1" />
						</div>
						
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="telephoneMere2"
								value="#{text['eleve.phone.mother2']}" />
							<h:inputText id="telephoneMere2" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.telephoneMere2}" styleClass="form-control" required="false" maxlength="15" >
								<f:validateRegex pattern="^0\d{9}"/>
							</h:inputText>
							<p:message for="telephoneMere2" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="emailParent" value="#{text['eleve.emailParent']}" />
							<h:inputText id="emailParent" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.emailParent}" styleClass="form-control" required="false" maxlength="50">
								<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
							</h:inputText>
							<p:message for="emailParent" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="emailEleve" value="#{text['eleve.emailEleve']}" />
							<h:inputText id="emailEleve" validatorMessage="#{text['errors.invalid']}" value="#{eleveController.eleve.emailEleve}" styleClass="form-control" required="false" maxlength="50" >
								<f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />
							</h:inputText>
							<p:message for="emailEleve" />
						</div>
					</div>
					
					<div class="row">
						<div class="col-sm-4 form-group">
							<h:outputLabel styleClass="control-label" for="adresse"
								value="#{text['eleve.adresse']}" />
							<h:inputTextarea rows="3" id="adresse" value="#{eleveController.eleve.adresse}"
								styleClass="form-control" required="false" maxlength="150" />
							<p:message for="adresse" />
						</div>
						
						<div style="text-align: right;" class="col-sm-4 form-group col-md-offset-4">
							<h:outputLabel styleClass="control-label" for="adresseAr"
								value="#{text['eleve.adresseAr']}" />
							<h:inputTextarea rows="3" id="adresseAr" value="#{eleveController.eleve.adresseAr}" style="text-align: right;"
								styleClass="form-control" required="false" maxlength="150" />
							<p:message for="adresseAr" />
						</div>
					</div>
				</div>
				
				<div class="well">
					<div class="row">
						<div class="col-md-6 col-md-offset-5">
							<ul class="list-inline">
								<li>
									<h:commandButton value="#{text['button.save']}"
										action="#{eleveController.save}" id="save" styleClass="btn btn-primary" />
								</li>
								<li>
									<h:commandButton value="#{text['button.cancel']}" action="#{eleveController.cancel}"
										immediate="true" id="cancel" styleClass="btn btn-default" />
								</li>
							</ul>
						</div>
					</div>
				</div>
			</h:form>
		</div>
	</ui:define>
</ui:composition>
</html>